<template>
  <div>
    <van-nav-bar
      class="user-title"
      title="用户信息"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- 用户展示信息 -->
    <!-- 头像 -->
    <input
      type="file"
      hidden
      ref="input"
      multiple
      accept=".png,.jpg"
      @change="onSelected"
    />
    <van-cell is-link title="头像" @click="$refs.input.click()">
      <van-image round width="0.8rem" height="0.8rem" :src="userInfo.photo" />
    </van-cell>

    <!-- 昵称 -->
    <van-cell is-link title="昵称" @click="isShowName = true">
      <span>{{ userInfo.name }}</span>
    </van-cell>

    <!-- 性别 -->
    <van-cell is-link title="性别" @click="isShowGender = true">
      <span>{{ userInfo.gender === 0 ? "男" : "女" }}</span>
    </van-cell>

    <!-- 生日 -->
    <van-cell is-link title="生日" @click="isShowBirthday = true">
      <span>{{ userInfo.birthday }}</span>
    </van-cell>

    <!-- 弹出层 -->
    <!--  头像的弹出层 -->
    <van-popup
      v-model="isShowAvatar"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <Update-Avatar
        v-if="isShowAvatar"
        @close="isShowAvatar = false"
        :photo="photo"
        @update-photo="[(userInfo.photo = $event), (isShowAvatar = false)]"
      ></Update-Avatar>
    </van-popup>

    <!-- 信息的弹出层 -->
    <van-popup
      v-model="isShowName"
      position="bottom"
      :style="{ height: '100%' }"
      ><Update-NCname
        v-if="userInfo.name && isShowName"
        @close="isShowName = false"
        :name.sync="userInfo.name"
      ></Update-NCname
    ></van-popup>

    <!-- 性别的弹出层 -->
    <van-popup
      v-model="isShowGender"
      position="bottom"
      :style="{ height: '30%' }"
      ><UpdateGender
        v-if="userInfo.name && isShowGender"
        :gender.sync="userInfo.gender"
        @close="isShowGender = false"
      ></UpdateGender
    ></van-popup>

    <!-- 生日的弹出层 -->
    <van-popup
      v-model="isShowBirthday"
      position="bottom"
      :style="{ height: '30%' }"
    >
      <!-- <UpdateBirthday
        v-if="userInfo.birthday && isShowBirthday"
        :birthday.sync="userInfo.birthday"
        @close="isShowBirthday = false"
      ></UpdateBirthday> -->
      <UpdateBirthday
        v-if="userInfo.birthday && isShowBirthday"
        v-model="userInfo.birthday"
        @close="isShowBirthday = false"
      ></UpdateBirthday>
    </van-popup>
  </div>
</template>

<script>
import { getUserProfileAPI } from "@/api";
import { resolveToBase64 } from "@/utils/index.js";
import UpdateNCname from "./components/UpdateNCname.vue";
import UpdateGender from "./components/UpdateGender.vue";
import UpdateBirthday from "./components/UpdateBirthday.vue";
import UpdateAvatar from "./components/UpdateAvatar.vue";
export default {
  name: "user",
  created() {
    this.getUserProfile();
  },
  components: { UpdateNCname, UpdateGender, UpdateBirthday, UpdateAvatar },
  data() {
    return {
      userInfo: {},
      isShowName: false,
      isShowGender: false,
      isShowBirthday: false,
      isShowAvatar: false,
      photo: ""
    };
  },
  methods: {
    async getUserProfile() {
      const { data } = await getUserProfileAPI();
      this.userInfo = data.data;
      console.log(data);
    },
    onClickLeft() {
      this.$router.back();
    },
    async onSelected() {
      // 选择用户的获取的问价（存在input.files）
      const file = this.$refs.input.files[0];
      // console.log(file);
      // 转换为base64
      // const fr = new FileReader();
      // fr.readAsDataURL(fileList);
      // fr.onload = (e) => {
      //   console.log(e.target.result);
      // };
      const base64 = await resolveToBase64(file);
      this.photo = base64;
      // 显示弹窗
      this.isShowAvatar = true;

      // change事件触发，所以不能选择同一张图片。需要手动清空input的value值
      this.$refs.input.value = "";
    }
  }
};
</script>

<style scoped lang="less">
:deep(.van-nav-bar__content) {
  background-color: #3296fa;
  .van-nav-bar__title {
    color: #fff;
  }
  .van-icon-arrow-left {
    color: #fff;
  }
}
</style>
